<template>
	<view class="Haader">
		<view class="title">
			<uni-nav-bar :fixed="true" :border="false" left-icon="left" left-text="返回" title="添加车辆" />
		</view>
		<view class="CarImg">
			<image src="../../static/images/Cars.png" mode=""></image>
		</view>
		<view class="CarNumber">
			<input class="uni-input" maxlength="10" placeholder="请输入车牌号" v-model="form.carno" />
			<view>
				<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
			</view>
		</view>
		<view class="DelView" @click="add()">
			添加
		</view>
	</view>
</template>

<script>
	import {
		addcar
	} from "../../apis/index.js"
	export default {
		data() {
			return {
				defaultNum: '',
				form: {
					carno: "",
				}
			}
		},
		watch: {
			plateNum(e) {
				console.log(e)
			}
		},
		methods: {
			numberInputResult(e) {
				// console.log(e,"121212");
				this.form.carno = e
			},
			async add() {
				await addcar({
					carno: this.form.carno
				})
				uni.navigateTo({
					url: "/pages/MyCar/MyCar"
				})
			}
		}
	}
</script>

<style lang="less">
	.Cars {
		width: 100% !important;
		height: auto;
	}

	page {
		background-color: #ffffff;

		.CarImg {
			margin-top: 52rpx;

			image {
				width: 100%;
				height: 245rpx;
			}
		}

		.CarNumber {
			background-color: #f6f6f6;
			margin: 98rpx 54rpx 98rpx 54rpx;
			padding-top: 32rpx;
			padding-left: 40rpx;
			padding-bottom: 30rpx;

			input {
				font-size: 30rpx;
				color: #333333;
			}
		}

		.DelView {
			// width: 100%;
			height: 92rpx;
			background-color: #1f8fff;
			margin: 160rpx 30rpx;
			border-radius: 43rpx;
			text-align: center;
			color: #fff;
			font-size: 34rpx;
			line-height: 92rpx;
		}
	}
</style>